import React, { Component } from 'react';

class Index extends Component {
    constructor(props){
        super(props);
        this.state = {
            msg:"",
            list:[],
            lister:[]
        }
    }
    render() {
        return (
            <div>
                <input type="text" value={this.state.msg} onChange={this.handleChange} onKeyUp={this.handEnter}/>
                <h2>未完成</h2>
                {this.state.list.map(item=>{
                    return(<div key={item.name}><input type="checkbox" defaultChecked={item.isShow} onClick={this.handshow.bind(this,item)} />{item.name}<button onClick={this.handleDelete.bind(this,item)}>删除</button></div>)
                })}
                <h2>已完成</h2>
                {this.state.lister.map(item=>{
                    return(<div key={item.name}><input type="checkbox" defaultChecked={item.isShow} onClick={this.handshow.bind(this,item)} />{item.name}<button onClick={this.handleDeletes.bind(this,item)}>删除</button></div>)
                })}
            </div>
        );
    }
    handleChange = (event)=>{
        this.setState({
            msg:event.target.value
        })
    }
    handEnter =(event)=>{
        var list = this.state.list
        // console.log(list);
       if(event.keyCode === 13){
           var index = list.findIndex(item=>{
               return item.name === this.state.msg
           })
           console.log(index);
           if(index === -1){
            list.push({
                name:this.state.msg,
                isShow:false
            })
            this.setState({
                list,
                msg:""
            })
           }
        //    console.log(this.state.msg);
       }
    }
    handshow =(val)=>{
        var list = this.state.list
        var lister = this.state.lister
        var {isShow} = val
        console.log(val);
        if(isShow === false){
            val.isShow = true
            console.log(val);
            lister.push(val)
            var index = list.findIndex((list)=>list.name === val.name)
            list.splice(index,1)
            this.setState({
                list,
                lister
            })
        }else{
            val.isShow = false
            list.push(val)
            var index = lister.findIndex((lister)=>lister.name === val.name)
            lister.splice(index,1)
            this.setState({
                list,
                lister
            })
        }
    }
    handleDelete=(val)=>{
      var list = this.state.list
      var index = list.findIndex(item=>{
        return item.name === val.name
      })
      list.splice(index,1)
      this.setState({
        list
      })
    }
    handleDeletes=(val)=>{
      var lister = this.state.lister
      var index = lister.findIndex(item=>{
        return item.name === val.name
      })
      lister.splice(index,1)
      this.setState({
        lister
      })
    }
}

export default Index;
